<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- <div id="app">
    <p> {{text}}</p>
    <p>{{obj.a}}</p>
  </div> -->
  <div id="arr">
    <p>{{text}}</p>
      <!-- <div>{{arr}}</div>
      <div>{{obj.name}}</div> -->
      <!-- <button @click="fnPush">push</button>
      <button @click="fnSplice">splice</button> -->
  </div>
</body>
<script src="../dist/vue.js"></script>
<script>
  // const vm = new Vue({
  //     el: '#app',
  //     data: {
  //       text: 'Hello',
  //       obj: {
  //         a: 1,
  //       }
  //     }
  //   })
  let id = 6
  const vm = new Vue({
    el: '#arr',
    data: {
      text:'Hello',
      // arr: [1, 2, 3, 4, 5],
      obj:{
        // name:''
      }
    },

    methods:{
        // fnPush(){
        //     this.arr.push(id++)
        // },
        // fnSplice(){
        //   debugger
        //     this.arr.splice(2,1,id++)
        // }
    }
  })
/*
data:{
  arr:[1,2,3,4,5],  arr dep  [] dep
  text:'text',  text dep
  obj:{     obj dep   dep {}

  }
}

*/

</script>

</html>
